<template>
  <div class="recmdBox">
    <ol type="1">
      <h3>热门文章推荐</h3>
      <img class="img1" src="http://60.205.247.68:9001/image/title.png" alt="" />
      <img class="img2" src="http://60.205.247.68:9001/image/title2.png" alt="" />
      <hr />
      <li v-for="recmd in recmds" :key="recmd.articalId">
        {{ recmd.articalTitle }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  name: "Recommend",
  data() {
    return {
      recmds: [],
      num: 1,
    };
  },
  methods: {
    getRecmd() {
      this.$axios({
        url: "works/getArticals",
        params: {
          pageNo: 1,
          pageSize: 4,
          order: "artical_hit desc",
        },
      })
        .then((res) => {
          // console.log(res.data.data.records);
          this.recmds = res.data.data.records;
        })
        .catch(() => {
          this.$message.error("请求失败！");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.recmdBox {
  position: fixed;
  top: 9rem;
  right: 9rem;
  width: 20%;
  height: 80vh;
  background-image: url(http://60.205.247.68:9001/image/right.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  //   推荐栏
  ol {
    width: 90%;
    height: 38%;
    border-radius: 20px;
    background: lightgrey;
    box-shadow: rgba(50, 50, 93, 0.25) 0px -30px 50px -18px inset,
      rgba(0, 0, 0, 0.3) 0px -12px 26px 18px inset,
      rgba(0, 0, 0, 0.3) 0px -12px 26px -18px inset,
      rgba(0, 0, 0, 0.3) 8px -8px 26px 18px inset;
    position: relative;
    left: 0.5rem;
    top: 10.5rem;
    letter-spacing: 1.5px;
    background-color: rgb(251, 110, 85);
    h3 {
      color: #f9fd86;
      line-height: 2em;
      text-indent: 1em;
      margin-top: 0.7em;
    }
    li {
      color: #f9fca0;
      margin: 0.8rem 0 0 2rem;
      list-style-type: decimal;
      list-style-position: inside;
      width: 80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .img1 {
      position: absolute;
      right: 1rem;
      top: -4.5rem;
      height: 150px;
    }
    .img2 {
      position: absolute;
      left: -1.5rem;
      top: 10.5rem;
      height: 100px;
    }
  }
}
</style>